<template>
  <div class="search-popup">
    <van-search
      v-model="searchVal"
      show-action
      :placeholder="defaultWord.keyword"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />
    <HistoryHotList
      v-if="compShow == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @tagClick="tagClick"
    />
    <SearchTipList
      v-else-if="compShow == 2"
      :searchTipListData="searchTipListData"
      @tipClick="tagClick"
    />
    <SearchProductList
      v-else-if="compShow == 3"
      :productsListData="productsListData"
      :filterCategory="filterCategory"
      @categoryChan="categoryChan"
      @priceChan="priceChan"
    />
  </div>
</template>

<script>
import HistoryHotList from "@/components/search/HistoryHotList";
import SearchTipList from "@/components/search/SearchTipList";
import SearchProductList from "@/components/search/SearchProductList";
import { mapMutations } from "vuex";
import {
  GetHisHotAPI,
  GetSearchListAPI,
  GetProductListAPI,
} from "@/request/api.js";
export default {
  data() {
    return {
      searchVal: "",
      compShow: 1,
      defaultWord: "",
      historyKeywordList: [],
      hotKeywordList: [],
      searchTipListData: [],
      productsListData: [],
      filterCategory: [],
      order:'desc',
      categoryId: 0,
      sort: 'id',
      timer: null
    };
  },
  components: {
    HistoryHotList,
    SearchTipList,
    SearchProductList,
  },
  methods: {
    ...mapMutations({
      chanIsShowShadow: "showShadow/chanIsShowShadow",
    }),
    categoryChan(id){
      this.categoryId = id;
      this.onSearch(this.searchVal)
    },
    priceChan(order){
      this.sort = 'price';
      this.order = order;
      this.onSearch(this.searchVal);
    },
    tagClick(val) {
      this.searchVal = val;
      this.onSearch(this.searchVal);
    },
    onSearch(value) {
      GetProductListAPI({
        keyword: value,
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort
      }).then((res) => {
        console.log("onSearchs API --- ", res);
        this.productsListData = res.data.data;
        this.filterCategory = res.data.filterCategory.map((item) => {
          return { text: item.name, value: item.id, checked: item.checked };
        });
      });
      this.compShow = 3;
      console.log("搜索", this.searchVal, value);
    },
    onCancel() {
      this.$router.go(-1);
      this.chanIsShowShadow(false);
    },
    onInput(userVal) {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.compShow = 2;
        GetSearchListAPI({ keyword: userVal }).then((res) => {
          console.log("onInput", res);
          this.searchTipListData = res.data;
        });
      }, 200)
    },
  },
  created() {
    GetHisHotAPI().then((res) => {
      if (res.errno == 0) {
        console.log(res);
        let { defaultKeyword, historyKeywordList, hotKeywordList } = res.data;
        this.defaultWord = defaultKeyword;
        this.historyKeywordList = historyKeywordList;
        this.hotKeywordList = hotKeywordList;
      }
    });
  },
};
</script>
 
<style lang = "less" scoped>
.search-popup {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: #efefef;
  z-index: 2;
}
</style>